<template>

<!--代码调试未通过3-17-->
  患者核酸信息查询：
    <div>
    <el-input
      type="text"
      v-model="natpatientTelephone"
      placeholder="请输入您的电话"
      clearable
    >
      <template #append>
          <el-button type="primary" @click="search()" >搜索</el-button>
   </template>
  </el-input>
 </div>
 <div>{{this.tableData}}</div>



  <div class="da">
    <div class="top">
      <el-row :gutter="20">
        <el-col :span="1"></el-col>
        <el-col :span="22">
          <el-card
            class="box-card"
            v-for="props in types"
            :key="props"
            @click="tanchu(props)"
          >
            <div class="title"><h4>{{ props.natdepartmentName }}</h4></div>
             <el-divider />
             <div v-for="shuju in props.children" :key="shuju">
               <div class="xiao">{{shuju.natdepartmentName}}</div>
             </div>
             
          </el-card>
        </el-col>
        <el-col :span="1"></el-col>
      </el-row>
    </div>
    

    <el-dialog v-model="dialogVisible" :title="props.natdepartmentName">
      <el-button type="primary" round @click="add()">预约核酸</el-button>
  <el-table :data="tableDataFromDB" height ="100" stripe style="width: 100%">
      </el-table>
      <el-dialog v-model="dialogVisible_add" title="预约" width="30%">
    <el-form label-width="130px">
      <el-form-item label="患者账号:">
        <el-input v-model="info_add.natpatientId" />
      </el-form-item>
      <el-form-item label="患者名:">
        <el-input v-model="info_add.natpatientName" />
      </el-form-item>
       <el-form-item label="患者电话:">
        <el-input v-model="info_add.natpatientTelephone" />
      </el-form-item>
    <el-form-item label="核酸类型:">
        <el-input v-model="info_add.natdepartmentName" />
      </el-form-item>
     <!--<el-form-item label="核酸类型">
            {{ Edit.natdepartmentName}}
          </el-form-item>-->

      <el-form-item label="患者密码:">
        <el-input v-model="info_add.natpatientPassword" />
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible_add = false">取消</el-button>
        <el-button type="primary" @click="insert()" v-model="dialogVisible_add"
          >确认</el-button>
      </span>
    </template>
  </el-dialog>

    </el-dialog>

    <el-dialog v-model="centerDialogVisible" width="65%" center @close="shuxin">
      <h1>{{ title }}</h1>
    </el-dialog>
  </div>
</template>


<script >
import { ElMessage } from "element-plus";
import { get } from "@/utils/request";


export default {
  //name: "infoIndex",
  //inject: ["reload"],
  
  data() {
    

    return {
      
      //.....
      dialogVisible: false,
      dialogVisible_add: false,
      
  
      info_edit: {},
      info_add:{},
      tableDataFromDB: [ ],
      //.....
      //输入框输入的是患者名(代码调试未通过)

      /*tableData:[],
      natpatientTelephone:'',
      searchData:[],*/

      types: [],
      dialogVisible: false,
      centerDialogVisible: false,
    
      title: "",
      natdepartment:[],
      natdepartmentName:[],
      natpatient:[],
      //week: [],
      //doctor: [],
      keshi: [],
      natdepartmentId: "",
      //guahao: [],
      innerVisible: false,
      Edit: [],
      natpatient: {
        natdepartment_name:sessionStorage.natdepartment_name,
        natpatient_id:sessionStorage.natpatient_id,
        natpatientTelephone:sessionStorage.natpatientTelephone,
        natpatient_name:sessionStorage.natpatient_name
      }, //患者
      props: [],
    };
  },
  //核酸类型-------必须
  mounted() {
    get("/getAllnatdepartments").then((res) => {
      this.types = res.data;
      console.log(res.data);
    });
   // this.getWeek();
    //this.getnatpatient();
  },
  

  //...方法
  methods: {
    add(){
      this.dialogVisible_add = !this.dialogVisible_add
    },
    insert(){
      this.dialogVisible_add = !this.dialogVisible_add
      get('/addnatpatient', this.info_add).then((res) => {
      console.log(res.data)
      ElMessage({
          message: '预约成功',
          type: 'success'
        })
        //refresh page
        window.location.reload()
       })      
    },
    edit() {
       this.dialogVisible = !this.dialogVisible
       console.log(this.info_edit)
       //调整日期格式
       var dt = new Date(this.info_edit.natcreateTime)
       let year = dt.getFullYear()
       let month = dt.getMonth() + 1
       let date = dt.getDate()
       this.info_edit.natcreateTime = year + '/' + month + '/' + date
       get('/updatenatpatient', this.info_edit).then((res) => {
       console.log(res)
       ElMessage({
          message: '修改成功',
          type: 'success'
                 })
        //window.location.reload()
    }) 
    },//...........
    search(){
      get("/getnatpatientTelephone",{
        natpatientTelephone: this.natpatientTelephone,
      }).then((res)=>{
        this.tableData = res.data;
        console.log(res.data);
      }),
      this.searchData = this.tableData;
      //..............
  },
    
    shuxin() {
      this.reload();
    },
    tanchu(props) {
      this.dialogVisible = true;
      this.props = props;
      console.log(this.props);
    },
  },

};

</script> 



<style lang="scss" scoped>
//.....
.input-with-select .el-input-group__prepend {
  background-color: var(--el-fill-color-black);
}


.top {
  margin-top: 15px;
  
}
.dialog-footer {
  margin-top: 5px;
  
}
.da {
  width: 100%;
  
}
.box-card {
  width: 25%;
  //background-color:(left, rgb(0, 255, 225) 0%,rgb(0, 34, 255)50%);
  background-image:-webkit-linear-gradient( left, rgb(0, 255, 225) 20%, rgb(89, 185, 237) 30%,rgb(0, 34, 255) 50%); 
  margin-left: 25px;
  margin-top: 5px;
  height: 120px;
  float: left;
  /*width:300px; height:100px; line-height:100px; /*text-align:center; font-size:32px; font-weight:bold; */
border:20px solid;
border-image:-webkit-linear-gradient(left, rgb(0, 255, 225) 0%, rgb(14, 161, 240) 30%, rgb(0, 34, 255) 60%, rgb(55, 0, 128) 90%) 10; 
}
.box-card:hover{
  background-color: rgb(72, 16, 239);
  color: rgb(5, 0, 0);
  .title{
    color: rgb(255, 255, 255);
    
  }
}
.title{
  color: rgb(1, 2, 11);
  margin-top: 10px;
  background:rgb(158, 150, 224);
   border-radius: 20px
  
   
}
.xiao{
   float: left;
   margin-left: 5px;
   margin-top: -5px;
   font-style: -3px;
   font-size:13px;
}
</style>






